<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>知识仓库 - 渐进学习平台</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    /* ===== 基础样式重置 ===== */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    }

    /* ===== CSS 变量定义 ===== */
    :root {
      --primary-color: #4a6bff;
      --primary-light: #eef2ff;
      --secondary-color: #ff6b6b;
      --accent-color: #00d2d3;
      --success-color: #10b981;
      --warning-color: #f59e0b;
      --danger-color: #ef4444;
      --text-primary: #1f2937;
      --text-secondary: #6b7280;
      --text-light: #9ca3af;
      --background-light: #f9fafb;
      --white: #ffffff;
      --border-color: #e5e7eb;
      --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.1);
      --shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.07);
      --shadow-heavy: 0 10px 15px rgba(0, 0, 0, 0.1);
      --border-radius: 8px;
      --transition: all 0.3s ease;
      --sidebar-width: 280px;
    }

    body {
      background-color: var(--background-light);
      color: var(--text-primary);
      line-height: 1.6;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    /* ===== 导航栏样式 ===== */
    .navbar {
      background: var(--white);
      box-shadow: var(--shadow-light);
      padding: 15px 0;
      z-index: 100;
      position: sticky;
      top: 0;
    }

    .navbar .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }

    .nav-brand {
      display: flex;
      align-items: center;
      font-size: 24px;
      font-weight: 700;
      color: var(--primary-color);
    }

    .nav-brand i {
      margin-right: 10px;
      font-size: 26px;
    }

    .nav-buttons {
      display: flex;
      gap: 15px;
    }

    /* ===== 按钮样式 ===== */
    .btn {
      padding: 10px 20px;
      border-radius: var(--border-radius);
      text-decoration: none;
      font-weight: 600;
      transition: var(--transition);
      display: inline-flex;
      align-items: center;
      cursor: pointer;
      border: none;
      font-size: 14px;
    }

    .btn-outline {
      border: 2px solid var(--primary-color);
      color: var(--primary-color);
      background: transparent;
    }

    .btn-primary {
      background: var(--primary-color);
      color: var(--white);
      box-shadow: var(--shadow-light);
    }

    .btn:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-medium);
    }

    .btn-outline:hover {
      background: var(--primary-color);
      color: var(--white);
    }

    /* ===== 主布局 ===== */
    .main-container {
      display: flex;
      flex: 1;
      max-width: 1200px;
      margin: 0 auto;
      width: 100%;
      padding: 20px;
      gap: 20px;
    }

    /* ===== 侧边栏样式 ===== */
    .sidebar {
      width: var(--sidebar-width);
      background: var(--white);
      border-radius: var(--border-radius);
      box-shadow: var(--shadow-light);
      padding: 20px;
      overflow-y: auto;
      height: fit-content;
      position: sticky;
      top: 90px;
    }

    .sidebar-header {
      margin-bottom: 20px;
      padding-bottom: 15px;
      border-bottom: 1px solid var(--border-color);
    }

    .sidebar-title {
      font-size: 18px;
      font-weight: 700;
      color: var(--text-primary);
      display: flex;
      align-items: center;
      gap: 10px;
    }

    /* ===== 搜索区域 ===== */
    .search-container {
      margin-bottom: 20px;
      position: relative;
    }

    .search-input {
      width: 100%;
      padding: 12px 15px 12px 40px;
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius);
      background: var(--background-light);
      font-size: 14px;
      transition: var(--transition);
    }

    .search-input:focus {
      outline: none;
      border-color: var(--primary-color);
      box-shadow: 0 0 0 3px rgba(74, 107, 255, 0.1);
    }

    .search-icon {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-light);
    }

    /* ===== 筛选区域 ===== */
    .filter-container {
      display: flex;
      flex-direction: column;
      gap: 15px;
      margin-bottom: 20px;
    }

    .filter-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .filter-label {
      font-weight: 600;
      color: var(--text-secondary);
      font-size: 14px;
    }

    .filter-dropdown {
      padding: 10px 15px;
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius);
      background: var(--white);
      font-size: 14px;
      cursor: pointer;
      width: 100%;
      transition: var(--transition);
    }

    .filter-dropdown:focus {
      outline: none;
      border-color: var(--primary-color);
      box-shadow: 0 0 0 3px rgba(74, 107, 255, 0.1);
    }

    /* ===== 层级导航样式 ===== */
    .hierarchy-nav {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .hierarchy-level {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .hierarchy-label {
      font-weight: 600;
      color: var(--text-secondary);
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .hierarchy-label i {
      color: var(--primary-color);
    }

    .hierarchy-links {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .hierarchy-link {
      display: inline-block;
      padding: 10px 15px;
      border-radius: var(--border-radius);
      background: var(--background-light);
      text-decoration: none;
      color: var(--text-primary);
      transition: var(--transition);
      font-weight: 500;
      font-size: 14px;
      border-left: 3px solid transparent;
    }

    .hierarchy-link.active {
      border-left-color: var(--primary-color);
      background: var(--primary-light);
      color: var(--primary-color);
      box-shadow: 0 2px 8px rgba(74, 107, 255, 0.15);
    }

    .hierarchy-link:hover {
      text-decoration: none;
      background: var(--primary-light);
      color: var(--primary-color);
      transform: translateX(5px);
    }

    /* ===== 主要内容区域 ===== */
    .content-area {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .page-header {
      background: var(--white);
      border-radius: var(--border-radius);
      box-shadow: var(--shadow-light);
      padding: 25px;
    }

    .page-title {
      font-size: 32px;
      color: var(--text-primary);
      margin-bottom: 10px;
      font-weight: 700;
    }

    .page-subtitle {
      font-size: 16px;
      color: var(--text-secondary);
      max-width: 700px;
      line-height: 1.6;
    }

    /* ===== 工具栏 ===== */
    .toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: var(--white);
      border-radius: var(--border-radius);
      box-shadow: var(--shadow-light);
      padding: 15px 20px;
    }

    .sort-options {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .sort-label {
      font-size: 14px;
      color: var(--text-secondary);
    }

    .view-toggle {
      display: flex;
      gap: 10px;
    }

    .view-btn {
      background: var(--background-light);
      border: none;
      border-radius: var(--border-radius);
      padding: 8px 12px;
      cursor: pointer;
      color: var(--text-secondary);
      transition: var(--transition);
    }

    .view-btn.active {
      background: var(--primary-color);
      color: var(--white);
    }

    /* ===== 知识包网格布局 ===== */
    .package-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 20px;
    }

    .package-card {
      background: var(--white);
      border-radius: var(--border-radius);
      overflow: hidden;
      box-shadow: var(--shadow-light);
      border: 1px solid var(--border-color);
      transition: var(--transition);
      display: flex;
      flex-direction: column;
      height: fit-content;
    }

    .package-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-heavy);
    }

    .package-image {
      height: 160px;
      background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--white);
      font-size: 24px;
    }

    .package-content {
      padding: 20px;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
    }

    .package-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 15px;
    }

    .package-title {
      font-size: 18px;
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1.3;
      flex: 1;
      margin-right: 10px;
    }

    .package-badge {
      background: var(--primary-light);
      color: var(--primary-color);
      padding: 5px 10px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 600;
      white-space: nowrap;
    }

    .package-description {
      color: var(--text-secondary);
      line-height: 1.5;
      margin-bottom: 15px;
      font-size: 14px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .package-meta {
      display: flex;
      justify-content: space-between;
      margin-bottom: 15px;
      font-size: 14px;
      color: var(--text-secondary);
    }

    .package-stats {
      display: flex;
      gap: 10px;
      margin-bottom: 15px;
    }

    .difficulty-badge {
      display: inline-block;
      padding: 5px 10px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: bold;
      text-transform: uppercase;
    }

    .difficulty-beginner {
      background: rgba(16, 185, 129, 0.1);
      color: var(--success-color);
    }
    .difficulty-intermediate {
      background: rgba(245, 158, 11, 0.1);
      color: var(--warning-color);
    }
    .difficulty-advanced {
      background: rgba(239, 68, 68, 0.1);
      color: var(--danger-color);
    }

    .package-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: auto;
    }

    .progress-container {
      flex-grow: 1;
      margin-right: 15px;
    }

    .progress-bar {
      height: 6px;
      background: var(--border-color);
      border-radius: 3px;
      overflow: hidden;
      margin-bottom: 5px;
    }

    .progress-fill {
      height: 100%;
      background: var(--success-color);
      border-radius: 3px;
      transition: width 0.5s ease;
    }

    .progress-text {
      font-size: 12px;
      color: var(--text-light);
    }

    .expand-btn {
      padding: 8px 15px;
      background: transparent;
      border: 1px solid var(--primary-color);
      color: var(--primary-color);
      border-radius: var(--border-radius);
      cursor: pointer;
      font-weight: 600;
      transition: var(--transition);
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
    }

    .expand-btn:hover {
      background: var(--primary-color);
      color: var(--white);
    }

    /* ===== 知识点列表样式 ===== */
    .points-container {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      margin-top: 0;
      border-top: none;
    }

    .points-container.expanded {
      max-height: 800px;
      border-top: 1px solid var(--border-color);
      margin-top: 20px;
    }

    .points-content {
      padding: 20px 20px 10px;
    }

    .knowledge-point {
      background: var(--background-light);
      border-radius: var(--border-radius);
      padding: 15px;
      margin-bottom: 15px;
      border-left: 4px solid var(--primary-color);
      transition: var(--transition);
    }

    .knowledge-point:hover {
      background: var(--primary-light);
    }

    .point-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
    }

    .point-title {
      font-weight: 600;
      color: var(--text-primary);
      flex-grow: 1;
    }

    .point-meta {
      display: flex;
      gap: 15px;
      font-size: 12px;
      color: var(--text-secondary);
      margin-bottom: 8px;
    }

    .point-description {
      color: var(--text-secondary);
      font-size: 14px;
      line-height: 1.4;
    }

    /* ===== 开始学习按钮 ===== */
    .start-point-btn {
      width: 100%;
      padding: 10px;
      background: var(--primary-color);
      color: var(--white);
      border: none;
      border-radius: var(--border-radius);
      cursor: pointer;
      font-weight: 600;
      margin-top: 10px;
      transition: var(--transition);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .start-point-btn:hover {
      background: #3a56e6;
      transform: translateY(-2px);
      box-shadow: var(--shadow-medium);
    }

    /* ===== 分页样式 ===== */
    .pagination-container {
      margin: 40px 0 20px;
      text-align: center;
    }

    .page-info {
      margin-bottom: 15px;
      color: var(--text-secondary);
      font-size: 14px;
    }

    .pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 5px;
      flex-wrap: wrap;
    }

    .page-link {
      padding: 10px 15px;
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius);
      text-decoration: none;
      color: var(--text-primary);
      transition: var(--transition);
      font-size: 14px;
      min-width: 40px;
      text-align: center;
      display: inline-block;
    }

    .page-link:hover {
      background: var(--primary-color);
      color: var(--white);
      border-color: var(--primary-color);
    }

    .page-link.active {
      background: var(--primary-color);
      color: var(--white);
      border-color: var(--primary-color);
    }

    .page-link.disabled {
      color: var(--text-light);
      cursor: not-allowed;
      background: var(--background-light);
    }

    .page-ellipsis {
      padding: 10px 5px;
      color: var(--text-light);
    }

    .page-jump {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-top: 15px;
      flex-wrap: wrap;
    }

    .page-input {
      width: 60px;
      padding: 8px 10px;
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius);
      text-align: center;
    }

    .jump-btn {
      padding: 8px 15px;
      background: var(--primary-color);
      color: var(--white);
      border: none;
      border-radius: var(--border-radius);
      cursor: pointer;
      font-size: 14px;
      transition: var(--transition);
    }

    .jump-btn:hover {
      background: #3a56e6;
    }

    /* ===== 页脚样式 ===== */
    footer {
      text-align: center;
      color: var(--text-secondary);
      padding: 30px 0;
      margin-top: 40px;
      border-top: 1px solid var(--border-color);
      background: var(--white);
    }

    footer p {
      margin-bottom: 15px;
    }

    /* ===== 响应式设计 ===== */
    @media (max-width: 1024px) {
      .main-container {
        flex-direction: column;
      }

      .sidebar {
        width: 100%;
        position: static;
      }

      .hierarchy-links {
        flex-direction: row;
        flex-wrap: wrap;
      }

      .hierarchy-link {
        margin-bottom: 8px;
      }
    }

    @media (max-width: 768px) {
      .nav-buttons {
        flex-direction: column;
        width: 100%;
        gap: 10px;
      }

      .navbar .container {
        flex-direction: column;
        gap: 15px;
      }

      .package-grid {
        grid-template-columns: 1fr;
      }

      .toolbar {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
      }

      .sort-options {
        width: 100%;
        justify-content: space-between;
      }

      .pagination {
        gap: 3px;
      }

      .page-link {
        padding: 8px 12px;
        font-size: 12px;
        min-width: 35px;
      }
    }

    @media (max-width: 480px) {
      .content-area {
        padding: 0;
      }

      .page-header {
        padding: 20px;
      }

      .package-card {
        padding: 15px;
      }

      .page-title {
        font-size: 28px;
      }
    }
  </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar">
  <div class="container">
    <div class="nav-brand">
      <i class="fas fa-graduation-cap"></i> 渐进学习平台
    </div>
    <div class="nav-buttons">
      <span style="margin-right: 15px; color: var(--primary-color);">
        欢迎，<span id="username">学习者</span>
      </span>
      <a href="/" class="btn btn-outline">返回首页</a>
      <a href="#" class="btn btn-outline">退出</a>
    </div>
  </div>
</nav>

<!-- 主布局 -->
<div class="main-container">
  <!-- 侧边栏 -->
  <div class="sidebar">
    <div class="sidebar-header">
      <h2 class="sidebar-title">
        <i class="fas fa-filter"></i> 筛选与导航
      </h2>
    </div>

    <!-- 搜索区域 -->
    <div class="search-container">
      <i class="fas fa-search search-icon"></i>
      <input type="text" class="search-input" placeholder="搜索知识包或知识点...">
    </div>

    <!-- 筛选区域 -->
    <div class="filter-container">
      <div class="filter-group">
        <div class="filter-label">难度筛选</div>
        <select class="filter-dropdown" id="difficultyFilter">
          <option>全部难度</option>
          <option>初级</option>
          <option>中级</option>
          <option>高级</option>
        </select>
      </div>
      <div class="filter-group">
        <div class="filter-label">学习状态</div>
        <select class="filter-dropdown" id="statusFilter">
          <option>全部状态</option>
          <option>未开始</option>
          <option>学习中</option>
          <option>已完成</option>
        </select>
      </div>
      <button class="btn btn-primary" onclick="applyFilters()">
        <i class="fas fa-filter"></i> 应用筛选
      </button>
    </div>

    <!-- 四层级导航区域 -->
    <div class="hierarchy-nav">
      <!-- 知识分类层级 -->
      <div class="hierarchy-level">
        <div class="hierarchy-label">
          <i class="fas fa-layer-group"></i> 知识分类
        </div>
        <div class="hierarchy-links">
          <a href="#" class="hierarchy-link active">全部分类</a>
          <a href="#" class="hierarchy-link">Java基础</a>
          <a href="#" class="hierarchy-link">Spring框架</a>
          <a href="#" class="hierarchy-link">数据库</a>
          <a href="#" class="hierarchy-link">前端技术</a>
        </div>
      </div>

      <!-- 知识板块层级 -->
      <div class="hierarchy-level">
        <div class="hierarchy-label">
          <i class="fas fa-cubes"></i> 知识板块
        </div>
        <div class="hierarchy-links">
          <a href="#" class="hierarchy-link active">全部板块</a>
          <a href="#" class="hierarchy-link">面向对象</a>
          <a href="#" class="hierarchy-link">集合框架</a>
          <a href="#" class="hierarchy-link">多线程</a>
          <a href="#" class="hierarchy-link">IO流</a>
        </div>
      </div>

      <!-- 知识包层级 -->
      <div class="hierarchy-level">
        <div class="hierarchy-label">
          <i class="fas fa-box"></i> 知识包
        </div>
        <div class="hierarchy-links">
          <a href="#" class="hierarchy-link active">全部知识包</a>
          <a href="#" class="hierarchy-link">Java核心基础</a>
          <a href="#" class="hierarchy-link">集合框架详解</a>
          <a href="#" class="hierarchy-link">多线程编程</a>
          <a href="#" class="hierarchy-link">IO与NIO</a>
        </div>
      </div>
    </div>
  </div>

  <!-- 主要内容区域 -->
  <div class="content-area">
    <!-- 页面标题区域 -->
    <div class="page-header">
      <h1 class="page-title">知识仓库</h1>
      <p class="page-subtitle">探索我们的知识库，选择适合你的学习路径。从基础到进阶，系统化学习编程技术。</p>
    </div>

    <!-- 工具栏 -->
    <div class="toolbar">
      <div class="sort-options">
        <span class="sort-label">排序方式:</span>
        <select class="filter-dropdown" style="width: auto;">
          <option>最新添加</option>
          <option>最受欢迎</option>
          <option>学习进度</option>
          <option>难度从低到高</option>
          <option>难度从高到低</option>
        </select>
      </div>
      <div class="view-toggle">
        <button class="view-btn active"><i class="fas fa-th"></i></button>
        <button class="view-btn"><i class="fas fa-list"></i></button>
      </div>
    </div>

    <!-- 知识包网格容器 -->
    <div class="package-grid" id="packageContainer">
      <!-- 知识包卡片示例 -->
      <div class="package-card">
        <div class="package-image">
          <i class="fas fa-code"></i>
        </div>
        <div class="package-content">
          <div class="package-header">
            <h3 class="package-title">Java核心基础</h3>
            <div class="package-badge">面向对象</div>
          </div>
          <p class="package-description">掌握Java编程语言的核心概念，包括数据类型、控制结构、面向对象编程等基础知识。</p>
          <div class="package-meta">
            <span><i class="far fa-clock"></i> 120分钟</span>
            <span><i class="fas fa-star"></i> 500经验</span>
            <span><i class="fas fa-book"></i> 8个知识点</span>
          </div>
          <div class="package-stats">
            <span class="difficulty-beginner difficulty-badge">初级: 5</span>
            <span class="difficulty-intermediate difficulty-badge">中级: 3</span>
            <span class="difficulty-advanced difficulty-badge">高级: 0</span>
          </div>
          <div class="package-footer">
            <div class="progress-container">
              <div class="progress-bar">
                <div class="progress-fill" style="width: 75%"></div>
              </div>
              <div class="progress-text">已学习 75%</div>
            </div>
            <button class="expand-btn" data-package-id="1">
              <span>展开知识点</span>
              <i class="fas fa-chevron-down"></i>
            </button>
          </div>
        </div>
        <!-- 知识点容器（默认隐藏，点击展开后显示） -->
        <div class="points-container" id="points-1">
          <div class="points-content">
            <div class="knowledge-point">
              <div class="point-header">
                <div class="point-title">Java数据类型与变量</div>
                <div class="difficulty-badge difficulty-beginner">初级</div>
              </div>
              <div class="point-meta">
                <span><i class="far fa-clock"></i> 15分钟</span>
                <span><i class="fas fa-star"></i> 50经验</span>
              </div>
              <p class="point-description">学习Java中的基本数据类型、引用数据类型以及变量的声明和使用。</p>
              <button class="start-point-btn" onclick="startTraining(1)">
                <i class="fas fa-play-circle"></i> 开始学习
              </button>
            </div>
            <div class="knowledge-point">
              <div class="point-header">
                <div class="point-title">控制结构与循环</div>
                <div class="difficulty-badge difficulty-beginner">初级</div>
              </div>
              <div class="point-meta">
                <span><i class="far fa-clock"></i> 20分钟</span>
                <span><i class="fas fa-star"></i> 70经验</span>
              </div>
              <p class="point-description">掌握Java中的条件语句和循环结构，实现程序流程控制。</p>
              <button class="start-point-btn" onclick="startTraining(2)">
                <i class="fas fa-play-circle"></i> 开始学习
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 更多知识包卡片 -->
      <div class="package-card">
        <div class="package-image" style="background: linear-gradient(135deg, #ff6b6b, #ffa726);">
          <i class="fas fa-layer-group"></i>
        </div>
        <div class="package-content">
          <div class="package-header">
            <h3 class="package-title">集合框架详解</h3>
            <div class="package-badge">集合框架</div>
          </div>
          <p class="package-description">深入理解Java集合框架，掌握List、Set、Map等常用集合类的使用和内部原理。</p>
          <div class="package-meta">
            <span><i class="far fa-clock"></i> 180分钟</span>
            <span><i class="fas fa-star"></i> 800经验</span>
            <span><i class="fas fa-book"></i> 12个知识点</span>
          </div>
          <div class="package-stats">
            <span class="difficulty-beginner difficulty-badge">初级: 4</span>
            <span class="difficulty-intermediate difficulty-badge">中级: 6</span>
            <span class="difficulty-advanced difficulty-badge">高级: 2</span>
          </div>
          <div class="package-footer">
            <div class="progress-container">
              <div class="progress-bar">
                <div class="progress-fill" style="width: 40%"></div>
              </div>
              <div class="progress-text">已学习 40%</div>
            </div>
            <button class="expand-btn" data-package-id="2">
              <span>展开知识点</span>
              <i class="fas fa-chevron-down"></i>
            </button>
          </div>
        </div>
      </div>

      <div class="package-card">
        <div class="package-image" style="background: linear-gradient(135deg, #00d2d3, #4ecdc4);">
          <i class="fas fa-tasks"></i>
        </div>
        <div class="package-content">
          <div class="package-header">
            <h3 class="package-title">多线程编程</h3>
            <div class="package-badge">多线程</div>
          </div>
          <p class="package-description">学习Java多线程编程，理解线程创建、同步机制、线程池等高级概念。</p>
          <div class="package-meta">
            <span><i class="far fa-clock"></i> 240分钟</span>
            <span><i class="fas fa-star"></i> 1000经验</span>
            <span><i class="fas fa-book"></i> 10个知识点</span>
          </div>
          <div class="package-stats">
            <span class="difficulty-beginner difficulty-badge">初级: 2</span>
            <span class="difficulty-intermediate difficulty-badge">中级: 5</span>
            <span class="difficulty-advanced difficulty-badge">高级: 3</span>
          </div>
          <div class="package-footer">
            <div class="progress-container">
              <div class="progress-bar">
                <div class="progress-fill" style="width: 20%"></div>
              </div>
              <div class="progress-text">已学习 20%</div>
            </div>
            <button class="expand-btn" data-package-id="3">
              <span>展开知识点</span>
              <i class="fas fa-chevron-down"></i>
            </button>
          </div>
        </div>
      </div>

      <div class="package-card">
        <div class="package-image" style="background: linear-gradient(135deg, #a855f7, #8b5cf6);">
          <i class="fas fa-database"></i>
        </div>
        <div class="package-content">
          <div class="package-header">
            <h3 class="package-title">IO与NIO</h3>
            <div class="package-badge">IO流</div>
          </div>
          <p class="package-description">掌握Java IO流操作，理解NIO非阻塞IO模型，提升文件处理和网络编程能力。</p>
          <div class="package-meta">
            <span><i class="far fa-clock"></i> 150分钟</span>
            <span><i class="fas fa-star"></i> 600经验</span>
            <span><i class="fas fa-book"></i> 9个知识点</span>
          </div>
          <div class="package-stats">
            <span class="difficulty-beginner difficulty-badge">初级: 3</span>
            <span class="difficulty-intermediate difficulty-badge">中级: 4</span>
            <span class="difficulty-advanced difficulty-badge">高级: 2</span>
          </div>
          <div class="package-footer">
            <div class="progress-container">
              <div class="progress-bar">
                <div class="progress-fill" style="width: 0%"></div>
              </div>
              <div class="progress-text">未开始</div>
            </div>
            <button class="expand-btn" data-package-id="4">
              <span>展开知识点</span>
              <i class="fas fa-chevron-down"></i>
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 分页导航 -->
    <div class="pagination-container">
      <div class="page-info">
        共 24 个知识包，第 1 页，共 3 页
      </div>
      <div class="pagination" id="pagination">
        <a href="#" class="page-link disabled">‹ 上一页</a>
        <a href="#" class="page-link active">1</a>
        <a href="#" class="page-link">2</a>
        <a href="#" class="page-link">3</a>
        <a href="#" class="page-link">下一页 ›</a>
      </div>
      <div class="page-jump">
        <span>跳转到</span>
        <input type="number" class="page-input" id="jumpPage" min="1" max="3" placeholder="页码">
        <span>页</span>
        <button class="jump-btn" onclick="jumpToPage()">确定</button>
      </div>
    </div>
  </div>
</div>

<!-- 页脚 -->
<footer>
  <p>&copy; 2024 渐进学习平台 - 让学习像健身一样科学有效</p>
  <p>联系我们: support@knowledge-gym.com</p>
</footer>

<script>
  /**
   * 页面加载完成后执行的初始化函数
   */
  document.addEventListener('DOMContentLoaded', function() {
    console.log('知识仓库页面初始化完成');

    // 为快速跳转输入框添加回车键支持
    const jumpInput = document.getElementById('jumpPage');
    if (jumpInput) {
      jumpInput.addEventListener('keypress', function(event) {
        if (event.key === 'Enter') {
          jumpToPage();
        }
      });
    }

    // 使用事件委托处理知识点展开按钮点击
    document.addEventListener('click', function(e) {
      if (e.target.closest('.expand-btn')) {
        const btn = e.target.closest('.expand-btn');
        const packageId = btn.getAttribute('data-package-id');
        togglePoints(packageId);
      }
    });

    // 视图切换按钮
    document.querySelectorAll('.view-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        document.querySelectorAll('.view-btn').forEach(b => b.classList.remove('active'));
        this.classList.add('active');

        const isListView = this.querySelector('.fa-list');
        const packageGrid = document.getElementById('packageContainer');

        if (isListView) {
          packageGrid.style.gridTemplateColumns = '1fr';
          document.querySelectorAll('.package-card').forEach(card => {
            card.style.flexDirection = 'row';
            card.querySelector('.package-image').style.width = '120px';
            card.querySelector('.package-image').style.height = 'auto';
            card.querySelector('.package-image').style.flexShrink = '0';
          });
        } else {
          packageGrid.style.gridTemplateColumns = 'repeat(auto-fill, minmax(300px, 1fr))';
          document.querySelectorAll('.package-card').forEach(card => {
            card.style.flexDirection = 'column';
            card.querySelector('.package-image').style.width = 'auto';
            card.querySelector('.package-image').style.height = '160px';
          });
        }
      });
    });
  });

  /**
   * 展开/收起知识点函数
   * @param {string} packageId - 知识包ID
   */
  function togglePoints(packageId) {
    const pointsContainer = document.getElementById('points-' + packageId);
    const expandBtn = document.querySelector(`.expand-btn[data-package-id="${packageId}"]`);
    const packageCard = pointsContainer.closest('.package-card');

    // 如果已经展开，直接收起
    if (pointsContainer.classList.contains('expanded')) {
      collapsePoints(pointsContainer, expandBtn, packageCard);
      return;
    }

    // 关闭所有其他展开的知识点容器
    closeAllOtherPoints(packageId);

    // 展开当前知识点
    expandPoints(pointsContainer, expandBtn, packageCard, packageId);
  }

  /**
   * 收起知识点
   */
  function collapsePoints(container, button, card) {
    // 设置当前高度
    container.style.maxHeight = container.scrollHeight + 'px';

    // 强制重绘
    container.getBoundingClientRect();

    // 开始收起动画
    container.style.maxHeight = '0px';
    button.innerHTML = '<span>展开知识点</span><i class="fas fa-chevron-down"></i>';
    card.classList.remove('expanding');

    // 动画结束后移除expanded类
    setTimeout(() => {
      container.classList.remove('expanded');
    }, 400);
  }

  /**
   * 展开知识点
   */
  function expandPoints(container, button, card, packageId) {
    // 添加展开类
    container.classList.add('expanded');
    card.classList.add('expanding');
    button.innerHTML = '<span>收起知识点</span><i class="fas fa-chevron-up"></i>';

    // 设置初始高度为0
    container.style.maxHeight = '0px';

    // 强制重绘
    container.getBoundingClientRect();

    // 显示加载状态
    const pointsContent = container.querySelector('.points-content');

    // 模拟加载延迟
    setTimeout(() => {
      // 设置最终高度
      container.style.maxHeight = container.scrollHeight + 'px';
    }, 300);
  }

  /**
   * 关闭所有其他展开的知识点
   */
  function closeAllOtherPoints(currentPackageId) {
    document.querySelectorAll('.points-container.expanded').forEach(container => {
      const otherPackageId = container.id.split('-')[1];
      if (otherPackageId !== currentPackageId) {
        const btn = document.querySelector(`.expand-btn[data-package-id="${otherPackageId}"]`);
        const card = container.closest('.package-card');
        collapsePoints(container, btn, card);
      }
    });
  }

  /**
   * 开始训练函数
   */
  function startTraining(pointId) {
    console.log('开始学习知识点:', pointId);
    // 在实际应用中，这里会跳转到学习页面
    alert('开始学习知识点 ID: ' + pointId);
  }

  /**
   * 应用筛选条件
   */
  function applyFilters() {
    const difficulty = document.getElementById('difficultyFilter').value;
    const status = document.getElementById('statusFilter').value;

    console.log('应用筛选 - 难度:', difficulty, '状态:', status);

    // 在实际应用中，这里会发送筛选请求并更新页面内容
    alert(`应用筛选: 难度=${difficulty}, 状态=${status}`);
  }

  /**
   * 快速跳转到指定页面
   */
  function jumpToPage() {
    const pageInput = document.getElementById('jumpPage');
    const page = parseInt(pageInput.value);
    const totalPages = 3; // 实际应用中应该从服务器获取

    if (page && page >= 1 && page <= totalPages) {
      console.log('跳转到第', page, '页');
      // 在实际应用中，这里会跳转到指定页面
      alert('跳转到第 ' + page + ' 页');
    } else {
      alert(`请输入有效的页码（1-${totalPages}）`);
      pageInput.focus();
    }
  }
</script>
</body>
</html>